<template>
  <div class="main">
    <!-- 标题 -->
    <Title title="其他资料" />
    <Card sub-title="其他成果清单">
      <Upload
        ref="otherFile"
        slot="content"
        :url="tempList.other ? tempList.other.file : ''"
        :file-name="tempList.other ? tempList.other.title : ''"
        @preview="preview"
        @input="achievementInput"
        @fileList="achievementFileList"
      />
    </Card>
    <Card sub-title="来校后工作计划">
      <Upload
        ref="planFile"
        slot="content"
        :url="tempList.planning ? tempList.planning.file : ''"
        :file-name="tempList.planning ? tempList.planning.title : ''"
        @preview="preview"
        @input="planInput"
        @fileList="planFileList"
      />
    </Card>
    <Card sub-title="成果证明">
      <Upload
        ref="proveFile"
        slot="content"
        :url="tempList.other ? tempList.other.file : ''"
        :file-name="tempList.other ? tempList.other.title : ''"
        @preview="preview"
        @input="proveInput"
        @fileList="proveFileList"
      />
    </Card>
    <Card sub-title="专家推荐">
      <Upload
        ref="recommendFile"
        slot="content"
        :url="tempList.recommendation ? tempList.recommendation.file : ''"
        :file-name="tempList.recommendation ? tempList.recommendation.title : ''"
        @preview="preview"
        @input="recommendInput"
        @fileList="recommendFileList"
      />
    </Card>
    <Card v-if="userInfo.spouse === 1" sub-title="配偶简历">
      <Upload
        ref="resumeFile"
        slot="content"
        :url="tempList.spouse_resume ? tempList.spouse_resume.file : ''"
        :file-name="tempList.spouse_resume ? tempList.spouse_resume.title : ''"
        @preview="preview"
        @input="resumeInput"
        @fileList="resumeFileList"
      />
    </Card>
  </div>
</template>

<script>
import Upload from '@/components/Upload'
import { submitMainInfo, getMainInfo, getTemplate } from '@/api/personnel'
export default {
  components: {
    Upload
  },
  data () {
    return {
      uploadUrl: process.env.VUE_APP_FILE_UPLOAD_URL,
      baseUrl: process.env.VUE_APP_BASE_API,
      achievementList: [],
      planList: [],
      proveList: [],
      recommendList: [],
      resume: [],
      userInfo: {},
      tempList: []
    }
  },
  created () {
    // 设置标题
    this.title = this.$route.meta.title
    this.userInfo = this.$store.getters.userInfo
    this.getMainInfo()
    this.getTemplate()

    // const routeUrl =
    //   'http://xnjdhr.wm71.mttest.cn/file/20220628/cfee37516e7369c92d7f67dc76f64b53.xls'
    // const url = encodeURIComponent(routeUrl)
    // const officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src=' + url
    // window.open(officeUrl, '_target')
  },
  methods: {
    // 点击预览
    preview (e) {
      if (e.indexOf('.pdf') !== -1) return window.open(e, '_target')
      const url = encodeURIComponent(e)
      const officeUrl =
        'http://view.officeapps.live.com/op/view.aspx?src=' + url
      window.open(officeUrl, '_target')
    },
    // 其他成果上传结果
    achievementInput (e) {
      if (e.code === 1) {
        this.submitMainInfo({
          other: e.data.url
        })
      } else {
        this.$message.error(e.msg)
      }
    },
    // 其他成果移除文件后剩余文件
    achievementFileList (fileList) {
      this.achievementList = fileList
    },
    // 计划上传结果
    planInput (e) {
      if (e.code === 1) {
        this.submitMainInfo({
          planning: e.data.url
        })
        this.planList.push(e.data.url)
      } else {
        this.$message.error(e.msg)
      }
    },
    // 计划移除文件后剩余文件
    planFileList (fileList) {
      this.planList = fileList
    },
    // 成果证明上传结果
    proveInput (e) {
      if (e.code === 1) {
        this.submitMainInfo({
          prove: e.data.url
        })
        this.proveList.push(e.data.url)
      } else {
        this.$message.error(e.msg)
      }
    },
    // 成果证明文件后剩余文件
    proveFileList (fileList) {
      this.proveList = fileList
    },
    // 推荐信文件上传结果
    recommendInput (e) {
      if (e.code === 1) {
        this.submitMainInfo({
          recommendation: e.data.url
        })
        this.recommendList.push(e.data.url)
      } else {
        this.$message.error(e.msg)
      }
    },
    // 推荐信文件移除后剩余文件
    recommendFileList (fileList) {
      this.recommendList = fileList
    },
    // 配偶简历文件上传结果
    resumeInput (e) {
      if (e.code === 1) {
        this.submitMainInfo({
          spouse_resume: e.data.url
        })
        this.resumeList.push(e.data.url)
      } else {
        this.$message.error(e.msg)
      }
    },
    // 配偶简历文件移除后剩余文件
    resumeFileList (fileList) {
      this.resumeList = fileList
    },
    // 文件提交
    async submitMainInfo (data) {
      await submitMainInfo(data)
      this.$message.success('上传成功')
    },
    async getMainInfo () {
      const res = await getMainInfo()
      if (!res.data) return
      const { other, planning, prove, recommendation, spouse_resume } = res.data
      other &&
        this.$refs.otherFile.fileList.push({
          name: '其他成果',
          url: this.baseUrl + other
        })
      planning &&
        this.$refs.planFile.fileList.push({
          name: '工作计划',
          url: this.baseUrl + planning
        })
      prove &&
        this.$refs.proveFile.fileList.push({
          name: '成果证明',
          url: this.baseUrl + prove
        })
      recommendation &&
        this.$refs.recommendFile.fileList.push({
          name: '专家推荐',
          url: this.baseUrl + recommendation
        })
      spouse_resume &&
        this.$refs.resumeFile.fileList.push({
          name: '配偶简历',
          url: this.baseUrl + spouse_resume
        })
    },
    // 获取模版链接
    async getTemplate () {
      const res = await getTemplate()
      this.tempList = res.data
    }
  }
}
</script>

<style lang="scss" scoped></style>
